import React, {useEffect} from 'react';
import {View, Text, FlatList, StyleSheet, Image, PixelRatio,} from 'react-native';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import {IUserInfo} from '@/models/user';
import Toast from 'react-native-root-toast';
import {windowWidth, windowHeight, getHeight, getWidth} from '@/utils/index';
import Touchable from "../../components/Touchable";
const mapStateToProps = ({users, loading}: RootState) => {
  return {
    photographerInfo: users?.photographerInfoByName,
    loading: loading.effects['users/getPhotographerInfoByName'],
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
}
function PhotographerList(props: IProps) {
  const {dispatch, photographerInfo,navigation} = props;
  useEffect(() => {
    console.log('photographerInfo', photographerInfo);
  }, []);
  const handlePress =(selectedId:string)=>{
    console.log("点击了flatItem");
    // 点击之后携带该项的_id跳转到主页
    navigation.navigate("PrincipalSheet",{
      selectedId:selectedId
    });
  }
  return (
    <View style={styles.container}>
      {photographerInfo?.length === 0 ? (
        <View style={styles.nullBox}>
          <Text style={styles.nullTip}>暂时没有相关名称摄影师哦~</Text>
        </View>
      ) : (
        <FlatList
        // data改变的时候因为是浅层比较，得先更改地址，否则可能不会更新（比如先复制到一个新的 Object 或者数组中）
          data={photographerInfo}
          // onEndReachedThreshold={0.3} 距离底部为可视区域的多少时，触发onEndReached函数
          // onEndReached={(info: {distanceFromEnd: number}) => {console.log('上拉刷新')}}
          renderItem={({item}) => {
            return (
              <Touchable 
              key={item._id} 
              onPress={()=>{handlePress(item._id as string)}} 
              style={styles.flatItem}>
                <Image
                  source={{uri: item.scurpture}}
                  style={styles.image}></Image>
                  <View>
                  <Text>用户名：{item.username}</Text>
                  <Text>年龄：{item.age}</Text>
                  <Text>性格：{item.nature}</Text>
                  <Text>距离我：</Text>
                  <Text>身份：{item.identity}</Text>
                  <Text>常住城市：{item.city}</Text>
                  </View>
              </Touchable>
            );
            // ((item: ItemT, index: number) => string) | undefined
          }} keyExtractor={item => item._id as string}></FlatList>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  nullBox: {
    width: windowWidth,
    height: windowHeight,
    display: 'flex',
    marginTop: 50,
    alignItems: 'center',
  },
  nullTip: {
    fontSize: 18,
    color: '#999',
  },
  flatItem:{
    paddingHorizontal: 10,
    fontSize: 18,
    height: 130,
    diaplay:"flex",
    flexDirection:"row",
    alignItems:"center",
    // borderBottomColor:"#ccc",
    // borderBottomWidth:1 / PixelRatio.get(),
    backgroundColor:"#fff",
    marginVertical:3
  },
  image: {
    width:100,
    height:100,
    borderRadius: 100,
    marginHorizontal:20,
  }
});

export default connector(PhotographerList);
